<!---秒杀商品库--->
<template>
  <div class="merchandise-management views-container">

    <div class="wlm-table">
      <div class="wlm-table-hearder-btn">
        <choose-goods ref="chooseGoods" comUrl="seckill" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
        <el-button size="small" type="primary" @click="goodsToogle">选择秒杀商品</el-button>
      </div>
      <div class="wlm-table-header">
        <el-form :model="tableFormatData.announcement.files" size="small" label-width="90px" class="retail-form" label-position="right">
          <el-form-item label="商品名称：" class="search">
            <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.announcement.files.keyword" placeholder="请输入商品名称" style="width:200px;"></el-input>
          </el-form-item>
          <el-form-item label="" class="filter-btns">
            <el-button type="primary" @click="filesSerch">筛选</el-button>
            <el-button type="text" @click="filesEmptyBefore">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="wlm-table-content">
        <el-table :ref="tableFormatData.announcement.key" :data="tableFormatData.announcement.tableData" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column prop="date" label="商品ID">
            <template slot-scope="scope">
              {{scope.row.goods_id}}
              <!-- <el-input-number
@blur="changeTableItem({ids:[scope.row.goods_id],goods_sort:scope.row.goods_sort},tableFormatData.announcement.change.sort)"
              style="width:100%;"
size="mini"
v-model="scope.row.goods_sort"
:controls="false"></el-input-number> -->
            </template>
          </el-table-column>
          <el-table-column prop="date" label="商品LOGO" min-width="35">
            <template slot-scope="scope" v-if="Array.isArray(scope.row.image) &&scope.row.image.length>0">
              <div class="wlm-table-logos">
                <img class="logo" :src="scope.row.image[0]['file_path']">
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="商品名称" min-width="100">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <div class="ellips_line2" style="max-width:200px;max-height: 51px;overflow: hidden;">
                  <span @mousemove="mouseenter(scope, true, 'showEditNameBtn')" @mouseout="mouseenter(scope, false, 'showEditNameBtn')">{{ scope.row.goods_name }}</span>
                  <svg-icon v-if="scope.row.showEditNameBtn" icon-class="editIcon" />
                </div>
              </div>
              <el-tag style="width: 36px;font-size:12px;" size="mini" v-if="scope.row.sale_type!=0">{{scope.row.sale_type==1?'秒杀':scope.row.sale_type==2?'拼团':scope.row.sale_type==3?'抽奖':scope.row.sale_type==4?'砍价':''}}</el-tag>
              <el-tag style="width: 60px;font-size:12px;" size="mini" v-if="scope.row.member_exclusive==1">会员专属</el-tag>
              <el-tag style="width: 46px;font-size:12px;" size="mini" v-if="scope.row.is_member_price==1">会员价</el-tag>
              <el-tag style="width: 36px;font-size:12px;" size="mini" v-if="scope.row.transport_type==30">卡密</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="价格" min-width="35">
            <template slot-scope="scope">
              <div>最低价格：{{scope.row.goods_min_price||''}}</div>
              <div>最高价格：{{scope.row.goods_max_price||''}}</div>
            </template>
          </el-table-column>
          <el-table-column  prop="address" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.common_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-b flex-align-c">
          <el-row class="pagination-btns">
            <el-checkbox class="check-all" true-label="1" false-label="0" v-model="tableFormatData.announcement.files.checkall" @change="toggleSelection">全部</el-checkbox>
            <el-button class="right-8" :disabled="isGroup" size="mini" @click="delTableList">删除</el-button>
          </el-row>
          <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.announcement.pagination.page" :page-sizes="tableFormatData.announcement.pagination.pagesizes" :page-size.sync="tableFormatData.announcement.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.announcement.pagination.total : 0">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  goodsCommon,
  categoryIndex,
  commondel
} from '@/api/merchandise'

import {
  businessIndex
} from '@/api/merchant'
import mixins from '@/mixins/mixins'

import power from '@/mixins/power'

import ChooseGoods from '@/components/ChooseGoods/index'

export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form'), power],
  name: 'ManagementPlatform',
  components: {
    ChooseGoods
  },

  created() {
    this.$nextTick(() => {
      categoryIndex().then((response) => {
        const {
          data: {
            data: msgData = []
          }
        } = response
        this.categoryData = msgData
      })
      businessIndex({ list_rows: 'all' }).then((response) => {
        const { data: { data: msgData = [] } } = response
        this.shopData = msgData
      })
    })
  },
  data() {
    return {
      shopData: [],
      popvisible: false,
      dialogVisibleImg: false,
      openimgDialogType: '',
      category_array: [],
      $index: -1,
      $type: -1,
      dialogTableVisible: false,
      categoryData: [],
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: '',
            params: {

            },
            filters: {
              choose: {
                bindInit: ['chooseGoodsConfig']
              },
              img: {
                bindInit: ['chooseBgConfig']
              }
            }
          }
        },
        formData: {
          goods: []
          // ids: [],
          // uppertime: '',
          // goods_status: 10
        }
        // rules: {}
      },
      tableFormatData: {
        current: 'announcement',
        announcement: {
          key: 'announcement',
          api: {
            getList: goodsCommon,
            delList: commondel
          },
          tableData: [],
          files: {
            sale_type: 1,
            transport_type: '',
            goodsType: 'sale',
            keyword: '',
            category_id: '',
            ids: [],
            checkall: '0',
            Recycle: '0',
            redirect: 'common_id',
            is_reservation: ''
          },
          change: {

          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      },
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        params: {
          indexType: 'spike'
        },
        seckill: 'seckills',
        disabled: [{
          label: 'sale_type',
          value: 0,
          reverse: true
        },
        {
          label: 'member_exclusive',
          value: 1
        }],
        initList: []
      }
    }
  },
  methods: {

    saveForm() {
      if (this.couponId !== '' && (this.formFormatData.formData.couponData.suit_goods_type !== 0)) {
        this.$refs.chooseGoods.output()
      } else {
        this.formFormatData.formData.suit_goods = []
      }
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/couponMarketing', code: 1 } })
    },
    filtersChange(val) {
      console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', val)
      this.currentRow = val.currentRow
      const displayData = val.displayData
      displayData.map(item => {
        item.attr = JSON.parse(JSON.stringify([...[], ...item.sku]))
        item.attr.map(attritem => {
          if (item.spec_type === 10) {
            attritem.spec_id = -1
          } else if (item.spec_type === 20) {
            attritem.spec_id = attritem.goods_sku_id
          }
          attritem.price = ''
          attritem.stock = ''
          attritem.is_use = 1
        })
      })
      displayData.map(item => {
        var hasIndex = this.formFormatData.formData.goods.findIndex(tableitem => { return tableitem.goods_id === item.goods_id })
        if (hasIndex === -1) {
          this.formFormatData.formData.goods.push(JSON.parse(JSON.stringify(item)))
        }
      })
      console.log('xxxxxxxxx', this.formFormatData.formData.goods)
      console.log('/*/------------------------', this.tableFormatData.announcement.tableData)

      this.resetGoodsCommon()
    },

    resetGoodsCommon() {
      goodsCommon({
        sale_type: 1,
        transport_type: '',
        goodsType: 'sale',
        keyword: '',
        category_id: '',
        ids: [],
        checkall: '0',
        Recycle: '0',
        redirect: 'goods_id',
        is_reservation: ''
      }).then(res => {
        if (res.data.code === 1) {
          this.tableFormatData.announcement.tableData = res.data.data.data
        }
      })
    },

    goodsToogle() {
      const result = []
      this.formFormatData.formData.goods.map(item => {
        result.push(item.goods_id)
      })
      this.$refs.chooseGoods.currentRow = result
      this.$refs.chooseGoods.toggle()
    },

    mouseenter(row, isshow, btntype) {
      this.$set(this.tableFormatData.announcement.tableData[row.$index], `${btntype}`, isshow)
    },
    filesEmptyBefore() {
      this.category_array = []
      this.filesEmpty()
    }

  }
}
</script>

<style lang="scss" scoped>
.merchandise-management {
  /deep/ .el-tag {
    font-size: 14px;
  }
}
</style>
